<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <a href="/home">首页</a>
        <a href="/service">服务</a>
        <a href="/mine">个人中心</a>
    </div>

    <div class="content">

    </div>

    <script>

        //history路由
        //思路: 点击不同的按钮, 通过history.pushState()切换不同的路由地址, 然后根据不同的路由地址调用不同的函数 渲染不同的内容.
        var as = document.querySelectorAll('a');
        as.forEach((item)=>{
            //给每个a标签绑定点击事件
            item.onclick = function(e){

                e.preventDefault();
                // 借助 history 对象的 pushState() 方法 添加一个新的历史记录 ( 地址栏的地址会发生改变 )
                // 注意: pushState() 必须在非 file:// 协议下调用.
                // 语法: history.pushState( 历史记录的状态 , 保留字符串 , url地址 );
                // this.href 获取的是 当前点击的a标签的href属性值
                history.pushState( { title:'', url:'' } , '' , this.href );

                //location.pathname 获取的是点击后最新的url路径                
                //根据不同的url地址, 渲染不同的内容
                switch( location.pathname ){
                    case '/home': home_page(); break;
                    case '/service': service_page(); break;
                    case '/mine': mine_page(); break;
                }
                
                // return false; //阻止a标签的默认行为(跳转到其他页面)
            }
        })

        //渲染首页的内容
        function home_page(){
            document.querySelector('.content').innerHTML = '首页的内容';
        }
        //渲染服务的内容
        function service_page(){
            document.querySelector('.content').innerHTML = '服务的内容';
        }
        //渲染个人中心的内容
        function mine_page(){
            document.querySelector('.content').innerHTML = '个人中心的内容';
        }

    </script>
</body>
</html>